<script setup>
const props = defineProps(["open"]);
</script>

<template>
  <Transition duration="600">
    <div class="modal-panel" v-if="open" :class="{ open }">
      <div class="background">
        <div></div>
      </div>
      <div class="body">
        <slot name="content"></slot>
      </div>
      <div class="actions">
        <slot name="actions"></slot>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.modal-panel {
  --_shape: var(--modal-panel-shape, 16px);
  --_background: var(--modal-panel-background, var(--md-sys-color-surface-container-high));
  position: relative;
  display: inline-block;
}

.modal-panel.v-enter-active,
.modal-panel.v-leave-active {
  transition-property: transform;
  transition-duration: var(--md-sys-motion-duration-long4);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.modal-panel.v-enter-from,
.modal-panel.v-leave-to {
  transform: translateY(-10%);
}

.modal-panel.v-enter-to,
.modal-panel.v-leave-from {
  transform: translateY(0%);
}

.modal-panel>.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: none;
  display: grid;
}

.modal-panel.v-enter-active>.background,
.modal-panel.v-leave-active>.background {
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--md-sys-motion-duration-long4);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.modal-panel.v-enter-from>.background,
.modal-panel.v-leave-to>.background {
  grid-template-rows: .4fr;
  opacity: 0;
}

.modal-panel.v-enter-to>.background,
.modal-panel.v-leave-from>.background {
  grid-template-rows: 1fr;
  opacity: 1;
}

.modal-panel>.background>div {
  background: var(--_background);
  border-radius: var(--_shape);
  min-height: 0;
}

.modal-panel>.body {
  position: relative;
  z-index: 1;
  display: grid;
}

.modal-panel.v-enter-active>.body {
  transition-delay: calc(var(--md-sys-motion-duration-long4) - var(--md-sys-motion-duration-long3));
}

.modal-panel.v-enter-active>.body,
.modal-panel.v-leave-active>.body {
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-long3);
  transition-timing-function: var(--md-sys-motion-easing-standard);
}

.modal-panel.v-enter-from>.body,
.modal-panel.v-leave-to>.body {
  opacity: 0;
}

.modal-panel.v-enter-to>.body,
.modal-panel.v-leave-from>.body {
  opacity: 1;
}

.modal-panel.v-enter-active>.actions,
.modal-panel.v-leave-active>.actions {
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-long1);
  transition-timing-function: var(--md-sys-motion-easing-standard);
}

.modal-panel.v-enter-active>.actions {
  transition-delay: calc(var(--md-sys-motion-duration-long4) - var(--md-sys-motion-duration-long1));
}

.modal-panel.v-leave-active>.actions {
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.modal-panel.v-enter-from>.actions,
.modal-panel.v-leave-to>.actions {
  opacity: 0;
}

.modal-panel.v-enter-to>.actions,
.modal-panel.v-leave-from>.actions {
  opacity: 1;
}
</style>